<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件通信</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <el-table :data="tableData">
        <el-table-column  label="日期"></el-table-column>
        <el-table-column  label="姓名"></el-table-column>
        <el-table-column  label="地址"></el-table-column>
      </el-table>
    </div>
    <script>
      // 定义组件
      Vue.component('el-table-column', {
        props: ['label'],
        template: `
          <td>{{label}}</td>
        `
      })
      Vue.component('el-table', {
        props: {
          data: Array // [{date, name, address...}]
        },
        template: `<table border="1">
        <thead>
          <tr>
            <slot></slot>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.data">
            <td>{{item.date}}</td>
            <td>{{item.name}}</td>
            <td>{{item.address}}</td>
          </tr>
        </tbody>
      </table>`
      });
      var vm = new Vue({
        el: '#app',
        data: {
          tableData: [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
            },
          ],
        },
      });
    </script>
  </body>
</html>
